<template>
  <div id="chart" style="width: 100%;height: 500px;"></div>
</template>
<script>
export default {
  data() {
    return {
      option: {
        title: {
          text: '基础K线图'
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          data: ['2017-10-24', '2017-10-25', '2017-10-26', '2017-10-27']
        },
        yAxis: {},
        series: [
          {
            type: 'candlestick',
            data: [
              [20, 34, 10, 38],
              [40, 35, 30, 50],
              [31, 38, 33, 44],
              [38, 15, 5, 42]
            ]
          }
        ]
      }
    }
  },
  methods: {
    generateChart() {
      this.$echarts.init(document.querySelector('#chart')).setOption(this.option)
    }
  },
  mounted() {
    this.generateChart()
  }
}
</script>